<template>
    <div class="editAccount">
        <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
        <div style="padding: 16px">
            <van-form @submit="onSubmit">
                <van-field v-model="invoiceHead" required label="发票抬头" placeholder="请输入发票抬头"
                    :rules="[{ required: true, message: '请输入发票抬头' }]" />
                <van-field v-model="creditCode" required label="税号" placeholder="请输入税号" :rules="[
            { required: true, message: '请输入税号' },
        ]" />
                <van-field v-model="consigneeMail" required label="收件人邮箱" placeholder="请输入收件人邮箱" :rules="[
            { required: true, message: '请输入收件人邮箱' },
        ]" />
                <van-field v-model="consigneePhone" label="收件人电话" placeholder="请输入收件人电话" :rules="[ {
            validator: (value, rule) => phoneNumberRight(value, rule),
            message: '请输入正确的电话号码',
        },]" />
                <van-field v-model="bankBranchName" label="开户银行" placeholder="请输入开户银行" />
                <van-field v-model="bankAccount" label="银行账户" placeholder="请输入银行账户" />
                <van-field v-model="companyPhone" label="电话号码" placeholder="请输入电话号码" :rules="[
            {
                validator: (value, rule) => phoneNumberRight(value, rule),
                message: '请输入正确的电话号码',
            },
        ]" />
                <van-field v-model="registerAddress" label="单位地址" placeholder="请输入单位地址" />

                <div style="margin: 16px 0">
                    <van-button block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { documentType } from "@/utils/options";
export default {
    name: "home",
    computed: {
        invoice() {
            const invoice = localStorage.getItem("invoice");
            if (invoice) {
                return JSON.parse(invoice);
            }
            return {};
        },
        hasInvoiceId() {
            return !!this.invoice.invoiceId || this.invoice.invoiceId === 0;
        },
        title() {
            if (!this.hasInvoiceId) {
                return "新增发票";
            }
            return "编辑发票";
        }
    },
    data() {
        return {
            columns: documentType,
            showPicker: false,
            invoiceHead: '',
            creditCode: '',
            registerAddress: '',
            companyPhone: '',
            consigneeName: '',
            consigneeMail: '',
            consigneeAddress: '',
            bankAccount: '',
            bankBranchName: '',
            consigneePhone: ''
        };
    },
    methods: {
        // 1.手机号码验证
        phoneNumberRight(val) {
            if (!val) {
                return true
            }
            return /^1[3-9]\d{9}$/.test(val);
        },
        onClickLeft() {
            localStorage.removeItem("invoice");
            const url = window.location.href
            if (url.includes('showInsured')) {
                this.$router.push(`/tempInput?insureInfoId=${this.$route.query.insureInfoId}&templateName=${this.$route.query.templateName}&getInsuredDataFromCache=true`);
            } else {
                this.$router.push("/invoiceMsg");
            }
        },
        onSubmit() {
            const {
                invoiceHead,
                creditCode,
                registerAddress,
                companyPhone,
                consigneeName,
                consigneeMail,
                consigneeAddress,
                consigneePhone,
                bankAccount,
                bankBranchName,
            } = this;
            const params = {
                invoiceHead,
                creditCode,
                registerAddress,
                companyPhone,
                consigneeName,
                consigneeMail,
                consigneeAddress,
                consigneePhone,
                bankAccount,
                bankBranchName,
            };
            const url = this.hasInvoiceId
                ? "/config/invoice/update"
                : "/config/invoice/add";
            if (this.hasInvoiceId) {
                params.invoiceId = this.invoice.invoiceId;
            }
            const message = this.hasInvoiceId ? "编辑成功" : "新增成功";
            this.$post(url, params).then((res) => {
                this.$toast({
                    message,
                    duration: 800,
                });
                this.onClickLeft();
            });
        },
    },
    mounted() {
        const { invoice } = this;
        if (JSON.stringify(invoice) !== "{}") {
            this.invoiceHead = invoice.invoiceHead;
            this.creditCode = invoice.creditCode;
            this.registerAddress = invoice.registerAddress;
            this.companyPhone = invoice.companyPhone;
            this.consigneeName = invoice.consigneeName;
            this.consigneeMail = invoice.consigneeMail;
            this.consigneeAddress = invoice.consigneeAddress;
            this.bankAccount = invoice.bankAccount;
            this.bankBranchName = invoice.bankBranchName;
            this.consigneePhone = invoice.consigneePhone;
        }
    },
};
</script>
<style scoped>
.editAccount {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
}
</style>